<template>
    <div class="dangers_container_right">
        <div class="dangers_top_right">
            <div class="dangers_top_right_title">
                <span>
                    <b style="font-size:24px;">隐患年度分布</b>
                </span>
                <span
                    class="dangers_top_right_type"
                    :class="{ active: cycleType == 2 }"
                    @click="cycleType = 2"
                    >等级</span
                >
                <span
                    class="dangers_top_right_type"
                    :class="{ active: cycleType == 1 }"
                    @click="cycleType = 1"
                    >类型</span
                >
                <div
                    id="dangers_top_right_echarts"
                    class="dangers_top_right_echarts"
                ></div>
            </div>
        </div>
        <div class="dangers_midedle_right">
            <h3 class="childpage-title" style="position:absolute">
                隐患年度积累
            </h3>
            <div id="yearLine" style="width:100%;height:100%"></div>
        </div>
        <div v-if="showHotWords" class="dangers_bottom_right">
            <h3 class="childpage-title" style="position:absolute">
                隐患年度热词
            </h3>
            <div id="hotWorld_hidden" style="width:100%;height:100%;"></div>
        </div>
        <!-- 详情按钮 -->
        <el-tooltip
            v-show="!$Ctl.isCs(true)"
            class="item"
            effect="dark"
            content="查看清单"
        >
            <div class="jump-detail-btn" @click="gotoDetail"></div>
        </el-tooltip>
        <!-- 详情按钮 -->
        <el-tooltip
            v-show="!$Ctl.isCs(true)"
            class="item"
            effect="dark"
            content="查看热力图"
        >
            <div
                class="jump-Heatmap-btn"
                :class="{ heatmapActive: heatmapFlag == true }"
                @click="showHeatmap(heatmapFlag ? false : true)"
            ></div>
        </el-tooltip>
    </div>
</template>
<script>
import "@/assets/font/iconfont/iconfont.css";
import {
    getHiddenManagerStatistics,
    getHiddenGradeNumByStatus,
    getHiddenTimeAccumulate,
    getTopHotWord,
    getHiddenHeatDist
} from "@/api/dangers";

let Echarts = require("echarts/lib/echarts");
let echarts = require("echarts/lib/echarts");
require("echarts-wordcloud");
require("echarts/lib/chart/pie");
require("echarts/lib/chart/radar");
require("echarts/lib/component/tooltip");
require("echarts/lib/chart/line");

export default {
    name: "RectificationDangers",
    data() {
        return {
            getHiddenDangersStatistics: {},
            getHiddenDangersStatus: {},
            getHiddenTimeAccumulateYearCount: {},
            cycleType: 1,
            orgIds: "",
            hotWordList: [],
            heatMapData: [], //热力图数据
            heatmapFlag: false, //热力图按钮flag
            heatmapMaxValue: 0, //热力图最大值
            showHotWords:this.bsConfig.showDangerHotWords!==false
        };
    },
    props: {
        parames: {
            required: true
        }
    },
    created() {
        let that = this;
        this.orgIds = this.parames.orgIds;
    },
    mounted() {
        this.getHiddenManagerStatistics();
        this.getHiddenGradeNumByStatus();
        this.getHiddenTimeAccumulateYear();
        //this.getWorld();
        if(this.showHotWords) this.getTopHotWord();
    },
    beforeDestroy: function() {
        this.showHeatmap(false);
    },
    methods: {
        //获取热力图数据
        getHiddenHeatDist(cb) {
            let that = this;
            let parames = {
                orgIds: this.orgIds,
                dtype:
                    localStorage.getItem("ilinkBs_currentMapType") == 1 ? 1 : 2
            };
            that.heatMapData=[]
            getHiddenHeatDist(parames).then(res => {
                if (res.status == 200) {
                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].total > that.heatmapMaxValue) {
                            that.heatmapMaxValue = res.data[i].total;
                        }
                        if (
                            localStorage.getItem("ilinkBs_currentMapType") == 2
                        ) {
                            //蜂鸟地图数据重组
                            that.heatMapData.push({
                                x: JSON.parse(res.data[i].mapLocation)[0].x,
                                y: JSON.parse(res.data[i].mapLocation)[0].y,
                                value: res.data[i].total
                            });
                        } else {
                            //百度地图数据重组
                            that.heatMapData.push({
                                lng: res.data[i].mapLocation.lon,
                                lat: res.data[i].mapLocation.lat,
                                count: res.data[i].total
                            });
                        }
                    }
                    cb && cb();
                }
            });
        },
        // 打开或关闭热力图
        showHeatmap(openOrClose) {
            const that = this;
            const mapType = localStorage.getItem("ilinkBs_currentMapType");
            that.heatmapFlag = openOrClose;
            // 关闭
            if (!that.heatmapFlag) {
                that.$Ctl.initDataHeatmap([], 0);
                let markData = [];
                if (localStorage.getItem("ilinkBs_mapData")) {
                    markData = JSON.parse(
                        localStorage.getItem("ilinkBs_mapData")
                    );
                    //地图隐患打点
                    let hiddenArr = [];
                    if (markData && markData.hidden && markData.hidden[0]) {
                        hiddenArr = markData.hidden[0].data;
                    }
                    that.$Ctl.setMapMark(
                        {
                            32: hiddenArr
                        },
                        true,
                        false
                    );
                }
                return;
            }
            // 打开
            if (
                mapType == 2 &&
                localStorage.getItem("ilinkBs_inoutDoorType") == 0
            ) {
                that.$Ctl.message("请前往室外地图打开热力图", "info");
                that.heatmapFlag = false
            } else if (
                (mapType == 2 /* &&
                    localStorage.getItem("ilinkBs_inoutDoorType") == 1 */) ||
                mapType == 1
            ) {
                that.getHiddenHeatDist(() => {
                    that.$Ctl.initDataHeatmap(
                        that.heatMapData,
                        that.heatmapMaxValue
                    );
                });
            }
        },
        gotoDetail() {
            let that = this;
            that.$Ctl.enterDetail("HiddenDangers", { orgId: that.orgIds });
        },
        getHiddenManagerStatistics() {
            getHiddenManagerStatistics({ orgIds: this.orgIds }).then(res => {
                if (res.status == 200) {
                    this.getHiddenDangersStatistics = res.data;
                }
            });
        },
        getHiddenGradeNumByStatus() {
            let that = this;
            let status = 0;
            let type = 0;
            if (that.cycleType == 1) {
                type = 1;
            } else if (that.cycleType == 2) {
                type = 2;
            }
            let parames = {
                orgIds: that.orgIds,
                type,
                status: 0,
                timeQuantum: 3
            };
            getHiddenGradeNumByStatus(parames).then(res => {
                if (res.status == 200) {
                    that.getHiddenDangersStatus = res.data;
                }
                that.initEchart(that.getHiddenDangersStatus);
            });
        },
        getHiddenTimeAccumulateYear() {
            let that = this;
            let parames = {
                orgIds: that.orgIds,
                type: 2,
                timeQuantum: 3
            };
            getHiddenTimeAccumulate(parames).then(res => {
                if (res.status == 200) {
                    that.getHiddenTimeAccumulateYearCount = res.data;
                }
                that.getYearLine(
                    that.getHiddenTimeAccumulateYearCount.dataCountList
                );
            });
        },
        getTopHotWord() {
            let that = this;
            let parames = {
                topN: 10,
                orgIds: that.orgIds,
                types: 1
            };
            getTopHotWord(parames).then(res => {
                if (res.status == 200) {
                    that.hotWordList = res.data.map(function(item) {
                        return {
                            name: item.keyWord,
                            value: item.score
                        };
                    });
                    that.getWorld();
                }
            });
        },
        //隐患年度分布
        initEchart(getHiddenDangersStatus) {
            let count = [
                { value: "", name: "" },
                { value: "", name: "" },
                { value: "", name: "" },
                { value: "", name: "" },
                { value: "", name: "" },
                { value: "", name: "" }
            ]; //各类型总数
            for (let i = 0; i < getHiddenDangersStatus.length; i++) {
                count[i].value = getHiddenDangersStatus[i].count;
                if (getHiddenDangersStatus[i].categoryName != null) {
                    count[i].name = getHiddenDangersStatus[i].categoryName;
                } else {
                    count[i].name = getHiddenDangersStatus[i].gradeName;
                }
            }

            let option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{b}：{c} ({d}%)"
                },
                series: [
                    {
                        name: "隐患年度分布",
                        type: "pie",
                        radius: ["25%", "65%"],
                        center: ["50%", "50%"],
                        // color: [
                        //   "#D9BA4F",
                        //   "#3673D7",
                        //   "#E98512",
                        //   "#00B551",
                        //   "#AC13B9",
                        //   "#7FE1FC"
                        // ],
                        data: count,
                        roseType: "radius",
                        // minAngle: 5, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
                        avoidLabelOverlap: true, //是否启用防止标签重叠策略
                        label: {
                            normal: {
                                formatter: ["{b|{b}}", "{c} ({d}%)"].join("\n"),
                                rich: {
                                    c: {
                                        color: "rgb(241,246,104)",
                                        fontSize: 18,
                                        fontWeight: "bold",
                                        lineHeight: 30
                                    },
                                    b: {
                                        color: "rgb(98,137,169)",
                                        fontSize: 14,
                                        height: 20
                                    }
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                lineStyle: {
                                    color: "rgb(98,137,169)"
                                },
                                smooth: 0.2,
                                length: 10,
                                length2: 20
                            }
                        },
                        itemStyle: {
                            normal: {
                                shadowColor: "rgba(0, 0, 0, 0.8)",
                                shadowBlur: 50,
                                color: function(params) {
                                    let colorIndex;
                                    if (params.name == "消防设施") {
                                        colorIndex = "#2CB58D";
                                    } else if (params.name == "建筑防火") {
                                        colorIndex = "#E78B3C";
                                    } else if (params.name == "生产设备") {
                                        colorIndex = "#E95299";
                                    } else if (params.name == "消防管理") {
                                        colorIndex = "#5388F4";
                                    } else if (params.name == "消防组织") {
                                        colorIndex = "#75C0F6";
                                    } else if (params.name == "人员素质") {
                                        colorIndex = "#D9BA4F";
                                    } else if (params.name == "特别重大隐患") {
                                        colorIndex = "#ED3368";
                                    } else if (params.name == "重大隐患") {
                                        colorIndex = "#FFA414";
                                    } else if (params.name == "一般隐患") {
                                        colorIndex = "#1E7FEE";
                                    } else if (params.name == "较大隐患") {
                                        colorIndex = "#DAD867";
                                    }
                                    return colorIndex;
                                }
                            }
                        }
                    }
                ]
            };
            this.$nextTick(() => {
                Echarts.init(
                    document.getElementById("dangers_top_right_echarts")
                ).setOption(option);
            });
        },
        //热词
        getWorld() {
            let myChart = echarts.init(
                document.getElementById("hotWorld_hidden")
            );
            let colorArr = [
                "#fb6873",
                "#fb547b",
                "#e750b7",
                "#7b50e7",
                "#507be7",
                "#50d7e7",
                "#5ee750",
                "#e7d350",
                "#e79750",
                "#e75050",
                "#ffa2a9",
                "#ffa2f5",
                "#b6a2ff",
                "#a2d2ff",
                "#a2ffba",
                "#feffa2",
                "#ffd2a2",
                "#f29b9b",
                "#ffc5a2",
                "#fac1fb",
                "#ba333d",
                "#ba3373",
                "#7933ba",
                "#338fba",
                "#33ba73",
                "#95ba33",
                "#ba9f33",
                "#ba7c33",
                "#ba5033",
                "#c8a9ac"
            ];
            let option1 = {
                tooltip: {
                    show: true,
                    formatter: function(params) {
                        let html = `<p><span style="display:inline-block;width:5px;
                height:5px;border-radius:50%;background-color:${
                    params.color
                };margin-right:5px;vertical-align:middle"></span>${
                            params.name
                        }：共出现${params.value}次</p>`;
                        return html;
                    }
                },
                series: [
                    {
                        type: "wordCloud",
                        gridSize: 35,
                        sizeRange: [12, 30],
                        rotationRange: [0, 0],
                        shape: "pentagon",
                        textStyle: {
                            normal: {
                                color: function() {
                                    return colorArr[
                                        Math.floor(
                                            Math.random() * colorArr.length
                                        )
                                    ];
                                }
                            },
                            emphasis: {
                                shadowBlur: 10,
                                shadowColor: "#333"
                            }
                        },
                        data: this.hotWordList
                    }
                ]
            };
            myChart.setOption(option1);
            window.onresize = myChart.resize;
        },
        //隐患年度积累
        getYearLine(getHiddenTimeAccumulateYearCount) {
            let yNum1 = []; //处理
            let yNum2 = []; //创建
            let xNum = []; //时间
            for (let i = 0; i < getHiddenTimeAccumulateYearCount.length; i++) {
                xNum.push(getHiddenTimeAccumulateYearCount[i].dayTime);
                yNum1.push(getHiddenTimeAccumulateYearCount[i].count);
                yNum2.push(getHiddenTimeAccumulateYearCount[i].faultCount);
            }
            let myChart = echarts.init(document.getElementById("yearLine"));
            let option = {
                legend: {
                    itemHeight: 0, //图例的高度
                    right: 20,
                    orient: "vertical",
                    selectedMode: false, //取消图例上的点击事件
                    textStyle: {
                        color: "#FFFFFF"
                    }
                },
                grid: {
                    left: "20",
                    right: "30",
                    bottom: "20",
                    containLabel: true
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "line" // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                xAxis: {
                    boundaryGap: false, //x轴从0开始到结束显示
                    data: xNum,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            // 使用深浅的间隔色
                            color: ["rgba(255,255,255,.5)"]
                        }
                    }, //去除网格线
                    axisTick: {
                        //轴刻度线
                        show: false
                    },
                    axisLine: {
                        lineStyle: {
                            color: ["rgba(255,255,255,.5)"]
                        }
                    },
                    axisLabel: {
                        interval: 1, //隔几个显示
                        textStyle: {
                            color: "#FFFFFF"
                        },
                        lineStyle: {
                            color: "#FFFFFF"
                        }
                    },
                    labels: {
                        style: {
                            color: "#FFFFFF"
                        }
                    }
                },
                yAxis: {
                    show: false,
                    splitLine: {
                        show: false
                    }, //去除网格线
                    axisLine: {
                        show: true
                    }
                },
                series: [
                    {
                        type: "line",
                        showSymbol: false, //显示折线拐点
                        itemStyle: {
                            color: "#00BA8F"
                        }, //线条样式
                        lineStyle: {
                            color: "#00BA8F"
                        },
                        name: "累计创建隐患数量",
                        z: 10,
                        // animation: true,
                        data: yNum2
                    },
                    {
                        type: "line",
                        showSymbol: false, //显示折线拐点
                        itemStyle: {
                            //点样式
                            color: "#EB8721"
                        }, //线条样式
                        lineStyle: {
                            //折线样式
                            color: "#EB8721"
                        },
                        name: "累计处理隐患数量",
                        // animation: true,
                        data: yNum1
                    }
                ]
            };
            myChart.setOption(option);
        }
    },
    watch: {
        cycleType(val, oldVal) {
            if (val && oldVal != val) {
                this.getHiddenGradeNumByStatus();
            }
        }
    }
};
</script>
<style lang="scss" scoped>
.dangers_container_right {
    position: relative;
    height: 100%;
    .dangers_top_right {
        height: 33%;
        .dangers_top_right_title {
            color: #4699ff;
            font-size: 28px;
            margin-top: 30px;
            .dangers_top_right_type {
                cursor: pointer;
                display: block;
                float: right;
                margin-right: 18px;
                padding: 0 15px;
                height: 40px;
                line-height: 40px;
                background: rgba(70, 153, 255, 0.1);
                border-radius: 4px;
                color: rgba(96, 194, 255, 0.4);
                font-size: 18px;
                font-weight: 400;
            }
            .dangers_top_right_echarts {
                width: 100%;
                height: 300px;
                background: url(../../../assets/images/detailPage/year_line_bg.png)
                    center center no-repeat;
            }
            .active {
                background: rgba(70, 153, 255, 0.3);
                border: 1px solid rgba(69, 157, 203, 1);
                color: #60c2ff;
                box-shadow: inset 0px 0px 10px 2px rgb(70, 153, 255);
                text-shadow: 0px 0px 8px #fff;
            }
        }
    }
    .dangers_bottom_right {
        height: 33%;
    }
    .dangers_midedle_right {
        height: 32%;
        margin-top: 20px;
    }
    .jump-detail-btn {
        position: absolute;
        bottom: 50px;
        left: -100px;
        width: 80px;
        height: 60px;
        background: url(../../../assets/images/cards/list-btn.png) center center
            no-repeat;
        background-size: contain;
        cursor: pointer;
        &:hover {
            background: url(../../../assets/images/cards/list-btn-hover.png)
                center center no-repeat;
            background-size: contain;
        }
    }
    .jump-Heatmap-btn {
        position: absolute;
        bottom: 50px;
        left: -200px;
        width: 80px;
        height: 60px;
        background: url(../../../assets/images/cards/heatmap-btn.png) center
            center no-repeat;
        background-size: contain;
        cursor: pointer;
    }
    .heatmapActive {
        background: url(../../../assets/images/cards/heatmap-btn-hover.png)
            center center no-repeat;
        background-size: contain;
    }
}
</style>
